import React from 'react';
import {Link} from "react-router-dom";

// <img src={post.img_path} className="img-fluid p-3 border-0 rounded-0 title-image" alt="标题图片"/>
  // <div style={{backgroundImage: `url(${post.img_path})`, backgroundSize: "cover"}}></div>
export default function PostList({posts}) {
    return (
        posts.map(post => (
            <div className="card border-0 shadow-sm border-bottom" key={post.slug} data-testid={`post-item-${post.id}`}>
                {!!post.img_path ? (
                    <div className="row g-0">
                        <div className="col-md-8">
                            <div className="card-body">
                                <h5 className="card-title">
                                    <Link to={`/post/${post.slug}`} className="fw-bold post-title">{post.title}</Link>
                                </h5>
                                <p className="card-text text-muted mt-2">{post.excerpt}</p>
                                <p className="card-text post-meta">
                                    发布于: {post.pub_date} | 阅读: {post.num_views} | 标签:
                                    {post.tags.map(tag => (
                                        <Link to={`/tag/${tag}`} key={tag} className="mx-2 post-tag font-weight-light">#{tag}</Link>
                                    ))}
                                </p>
                            </div>
                        </div>

                        <div className="col-md-4 d-none d-md-block">

                            <Link to={`/post/${post.slug}`}>

                                <img className="img-responsive title-image" src={`${post.img_path}`} alt="" />

                                {/*<div style={{*/}
                                {/*    backgroundImage: `url(${post.img_path})`,*/}
                                {/*}} className="title-image">*/}
                                {/*</div>*/}

                            </Link>
                        </div>

                    </div>
                ) : (
                    <div className="card-body">
                        <h5 className="card-title">
                            <Link to={`/post/${post.slug}`} className="fw-bold post-title">{post.title}</Link>
                        </h5>


                        <p className="card-text text-muted mt-2">{post.excerpt}</p>
                        <p className="card-text post-meta">
                            发布于: {post.pub_date} | 阅读: {post.num_views} | 标签:
                            {post.tags.map(tag => (
                                <Link to={`/tag/${tag}`} key={tag} className="mx-2 post-tag font-weight-light">#{tag}</Link>
                            ))}
                        </p>

                    </div>
                )}
            </div>
        ))
    )
};
